<template>
	<div class="box">
		<div class="container">
			<div class="logincon">
				<h2 class="title-center">{{$t('indexTitle.title1')}}</h2>
				<div>
					<div class="form">
						<div class="formitem" :class="{errorww:isShowOness,error:isShowThreess}">
							<div class="label">{{$t('indexTitle.title128')}}：</div>
							<el-input v-model="name" @input="usernameInput()" maxlength="12" minlength="6"></el-input>
							<div class="info-msg" v-if="!isShowOness&&!isShowThreess">{{$t('indexTitle.title199')}}
							</div>
							<div class="zhuyiBoxTow" v-if="isShowOness&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{$t('indexTitle.title199')}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowOness&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>

						<div class="formitem" :class="{errorww:isShowTowss,error:isShowThreess}">
							<div class="label">{{$t('indexTitle.title193')}}：</div>
							<el-input v-model="password" show-password @input="passwordInput()"></el-input>
							<div class="info-msg" v-if="!isShowTowss&&!isShowThreess">{{$t('indexTitle.title59')}}</div>
							<div class="zhuyiBoxTow" v-if="isShowTowss&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{$t('indexTitle.title59')}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowTowss&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>

						<div class="formitem" :class="{errorww:isShowfivess,error:isShowThreess}">
							<div class="label">{{$t('indexTitle.title242')}}：</div>
							<el-input v-model="realname" @input="realnameInput()"></el-input>
							<div class="info-msg" v-if="!isShowfivess&&!isShowThreess">{{$t('indexTitle.title286')}}
							</div>
							<div class="zhuyiBoxTow" v-if="isShowfivess&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{$t('indexTitle.title286')}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowfivess&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>

						<div class="formitem" :class="{errorww:isShowFourss,error:isShowThreess}">
							<div class="labels">{{$t('indexTitle.title130')}}：</div>
							<div class="react-tel-input">
								<div class="flag-dropdown">
									<div class="selected-flag" @click="changeshowselect()">
										<div class="flag" :class="country == 0 ? 'cn' : 'hk'">
											<div class="arrow" :class="select ? 'up':''"></div>
										</div>
									</div>
									<div class="country-list" v-if="select">
										<div>
											<div class="clitem" :class="country == 0 ? 'highlight':''"
												@click="changecountry(0)">
												<div class="flag cn"></div>
												<div style="margin-right: 6px;">{{$t('indexTitle.title200')}}</div>
												<div>+86</div>
											</div>
											<div class="clitem" :class="country == 1 ? 'highlight':''"
												@click="changecountry(1)">
												<div class="flag hk"></div>
												<div style="margin-right: 6px;">{{$t('indexTitle.title201')}}</div>
												<div>+852</div>
											</div>
										</div>
									</div>
								</div>
								<div class="qu" v-if="country == 0">+86</div>
								<div class="qu" v-if="country == 1">+852</div>
								<el-input v-model="phone" @input="phoneInput()"></el-input>
							</div>
							<div class="zhuyiBoxTow" v-if="isShowFourss&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{phonesamll}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowFourss&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
							<div class="info-msg"></div>
						</div>
						<div class="formitem" :class="{errorww:isShowsixss,error:isShowThreess}">
							<div class="label">{{$t('indexTitle.title185')}}：</div>
							<el-input v-model="tikuanpsg" @input="tikuanpsgInput()"
								onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" maxlength="6"></el-input>
							<div class="info-msg" v-if="!isShowsixss&&!isShowThreess">{{$t('indexTitle.title298')}}
							</div>
							<div class="zhuyiBoxTow" v-if="isShowsixss&&!isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{$t('indexTitle.title298')}}
							</div>
							<div class="zhuyiBoxTow" v-if="!isShowsixss&&isShowThreess">
								<img src="../assets/images/zhuyitow.png" alt="">
								{{messageText}}
							</div>
						</div>
						<div class="btn-group">
							<el-button class="comfrim" @click="chongxin()">{{$t('indexTitle.title202')}}</el-button>
							<el-button @click="registers()">{{$t('indexTitle.title203')}}</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="jiazaidonghua" v-if="isloadingTowShow">
			<img src="../assets/img/loading-ani.svg" alt="">
		</div>
		<!-- <div class="buttons">
			<img src="../assets/images/xiaoxi.png" alt="" />
		</div> -->
	</div>
</template>

<script>
	import {
		register,
		login
	} from "../utils/api.js"
	export default {
		data() {
			return {
				name: '',
				password: '',
				realname: '',
				phone: '',
				tikuanpsg: '',
				select: false,
				country: 1,

				namesmall: '',
				psdsamll: '',
				realnamesmall: '',
				tikuanpsgsmall: '',
				phonesamll: '',
				messageText: "",
				isShowOness: false,
				isShowTowss: false,
				isShowFourss: false,
				isShowThreess: false,
				isShowfivess: false,
				isShowsixss: false,
				isloadingTowShow: false,
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			usernameInput() {
				if (!this.name) {
					this.isShowOness = true;
					this.namesmall = this.$t('indexTitle.title204');
				} else {
					this.isShowOness = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			realnameInput() {
				if (!this.realname) {
					this.isShowfivess = true;
					this.realnamesmall = this.$t('indexTitle.title286');
				} else {
					this.isShowfivess = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			tikuanpsgInput() {
				if (!this.tikuanpsg) {
					this.isShowsixss = true;
					this.tikuanpsgsmall = this.$t('indexTitle.title298');
				} else {
					this.isShowsixss = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			passwordInput() {
				if (!this.password) {
					this.isShowTowss = true;
					this.psdsamll = this.$t('indexTitle.title205');
				} else {
					this.isShowTowss = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			phoneInput() {
				if (!this.phone) {
					this.isShowFourss = true;
					this.phonesamll = this.$t('indexTitle.title206');
				} else {
					this.isShowFourss = false;
					this.isShowThreess = false;
					this.messageText = '';
				}
			},
			changeshowselect() {
				this.select = !this.select
			},
			changecountry(e) {
				this.country = e
				this.select = !this.select
			},
			goback() {
				this.$router.go(-1)
			},
			chongxin() {
				this.name = ''
				this.password = ''
				this.phone = ''
			},
			registers() {
				let that = this;
				this.isloadingTowShow=true;
				this.isShowOness = false;
				this.isShowTowss = false;
				this.isShowFourss = false;
				this.isShowfivess = false;
				this.isShowsixss = false;
				if (this.name == '') {
					this.isShowOness = true;
					this.namesmall = this.$t('indexTitle.title204');
					this.isloadingTowShow = false;
					// this.$message.error(this.$t('indexTitle.title204'));
					return false
				}
				if (this.name && this.name.length < 6) {
					this.isShowOness = true;
					this.namesmall = this.$t('indexTitle.title287');
					this.isloadingTowShow = false;
					// this.$message.error('账号最少6位');
					return false
				}
				if (this.password == '') {
					this.isShowTowss = true;
					this.psdsamll = this.$t('indexTitle.title205');
					this.isloadingTowShow = false;
					// this.$message.error(this.$t('indexTitle.title205'));
					return false
				}
				if (this.tikuanpsg == '') {
					this.isShowsixss = true;
					this.namesmall = this.$t('indexTitle.title298');
					this.isloadingTowShow = false;
					// this.$message.error('请输入提款密码');
					return false
				}
				if (this.tikuanpsg && this.tikuanpsg.length < 6) {
					this.isShowsixss = true;
					this.namesmall = this.$t('indexTitle.title302');
					this.isloadingTowShow = false;
					// this.$message.error('账号最少6位');
					return false
				}
				if (this.realname == '') {
					this.isShowfivess = true;
					this.realnamesmall = this.$t('indexTitle.title286');
					this.isloadingTowShow = false;
					// this.$message.error('请输入真实姓名');
					return false
				}
				if (this.phone == '') {
					this.isShowFourss = true;
					this.phonesamll = this.$t('indexTitle.title206');
					this.isloadingTowShow = false;
					// this.$message.error(this.$t('indexTitle.title206'));
					return false
				}
				let data = {
					name: this.name,
					password: this.password,
					real_name: this.realname,
					phone: this.phone,
					qk_pwd: this.tikuanpsg
				}
				register(data).then((res) => {
					if (res.status.errorCode == 0) {
						// this.$message.success(res.status.msg);
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'success'
						// });
						that.goLogin();
					} else {
						this.isShowThreess = true;
						this.isloadingTowShow=false;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
				}).catch((err) => {
					this.isloadingTowShow=false;
					console.log(err, 'err')
				});
			},
			goLogin() {
				let that = this;
				let data = {
					name: this.name,
					password: this.password
				}
				login(data).then((res) => {
					if (res.status.errorCode == 0) {
						localStorage.setItem('token', res.data)
						localStorage.setItem('nameNum', this.name)
						localStorage.setItem('passwordNum', this.password)
						// setTimeout(function(){
						this.isloadingTowShow = false;
						// that.$router.push('/index')
						this.$emit('transfer', 1)
						// },1000)
					} else {
						this.isloadingTowShow=false;
						this.isShowThreess = true;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
				}).catch((err) => {
					this.isloadingTowShow=false;
					console.log(err, 'err')
				});
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.box {
		width: 100%;
		height: 100vh;
		background: #e7e7e7;
		padding-top: 175px;
	}

	.container {
		margin: 0 auto;
		margin-top: 100px;
		position: relative;
		width: 1200px;
	}

	.logincon {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
		margin: 56px auto;
		padding: 20px 40px 40px;
	}

	.title-center {
		border-bottom: 1px solid #ccc;
		height: 38px;
		margin-bottom: 10px;
		padding: 0 10px 10px;
		color: #5235ff;
		font-size: 24px;
		font-weight: 400;
	}

	.form {
		background: transparent;
		box-sizing: border-box;
		padding: 0 10px;
		position: relative;
		transform: scale(.95);
		z-index: 1;
	}

	.formitem {
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
		position: relative;
	}

	.label,
	.labels {
		padding-right: 10px;
		width: 280px;
		color: #535353;
		font-size: 14px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		line-height: 36px;
		text-align: right;
	}

	.label::before {
		color: #5235ff;
		content: "*";
		font-size: 18px;
	}

	.zhuyiBoxTow {}

	.zhuyiBoxTow img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBoxTow {
		width: 430px;
		display: flex;
		font-size: 12px;
		margin: 5px 0 10px;
		color: #e94951;
		font-weight: 300;
		/* position: absolute;
		top: 40px;
		left: 320px; */
	}

	/deep/ .el-input {
		margin-right: 20px;
		width: 220px;
	}

	/deep/ .el-input__inner {
		appearance: none;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 3px;
		box-sizing: border-box;
		color: #222;
		display: block;
		font-size: 14px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 36px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.error /deep/ .el-input__inner {
		border: 1px solid #e94951 !important;
		/* color: #e94951 !important; */
	}

	.errorww /deep/ .el-input__inner {
		border: 1px solid #e94951 !important;
		/* color: #e94951 !important; */
	}

	/deep/ .el-button {
		padding: 0px;
		width: 150px;
		background-color: #5235ff;
		border: 0;
		border-radius: 22.5px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		height: 45px;
		margin: 0 10px;
	}

	.bottom-text {
		color: #222;
		font-size: 14px !important;
		text-align: center;
	}

	.forget-options {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.forget-options div {
		color: #222;
		padding: 0 10px;
		font-size: 12px;
	}

	.text {
		color: #bbb;
		text-align: center;
	}

	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}

	.info-msg {
		color: #777;
		font-size: 14px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		line-height: 36px;
		width: 430px;
	}

	.react-tel-input {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	/deep/ .react-tel-input .el-input__inner {
		padding-left: 86px;
	}

	.flag-dropdown {
		background: 0 0;
		border: 0 solid #000;
		border-radius: 3px 0 0 3px;
		bottom: 0;
		align-items: center;
		display: flex;
		padding: 0;
		position: absolute;
		top: 0;
	}

	.selected-flag {
		background: 0 0;
		border: 0 solid #000;
		margin: 6px 10px;
		border-radius: 3px 0 0 0;
		height: 33px;
		padding: 0 0 0 8px;
		position: relative;
		width: 38px;
		z-index: 13;
		cursor: pointer;
	}

	.flag {
		background-image: url('../assets/images/flags.png') !important;
		height: 11px;
		margin-top: 0;
		position: absolute;
		top: calc(50% - 5px);
		width: 16px;
	}

	.flag.cn {
		background-position: -160px -22px;
	}

	.flag.hk {
		background-position: -80px -55px;
	}

	.arrow {
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 4px solid #555;
		height: 0;
		left: 20px;
		margin-top: -2px;
		position: relative;
		top: 50%;
		width: 0;
	}

	.arrow.up {
		border-bottom: 4px solid #555;
		border-top: none;
	}

	.country-list {
		width: 370px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 0 0 3px 3px;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
		height: auto !important;
		list-style: none;
		margin: -1px 0 0 -1px;
		max-height: 200px;
		max-width: 265px;
		min-width: 250px;
		overflow-y: scroll;
		padding: 0;
		position: absolute;
		top: 33px !important;
		z-index: 2;
		overflow: auto;
		will-change: transform;
	}

	.country-list>div {
		position: relative;
		width: 100%;
		min-height: 100%;
		height: 80px;
	}

	.clitem {
		width: 100%;
		height: 40px;
		padding: 5px 10px;
		align-items: center;
		display: flex;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}

	.clitem.highlight {
		background-color: #c7e2f1;
	}

	.country-list .flag {
		margin-right: 6px;
		margin-top: 2px;
		position: relative;
		top: 0;
	}

	.qu {
		position: absolute;
		top: 8px;
		left: 52px;
		color: #535353;
		z-index: 1;
	}

	.btn-group {
		margin: 40px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.comfrim {
		background-color: #aaa;
	}

	.jiazaidonghua {
		height: 100px;
		width: 100px;
		background-color: #313131;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-25%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		z-index: 99999;
	}

	.jiazaidonghua img {
		height: 45px;
		width: 45px;
	}
</style>